<template>
  <div class="page-box">
    <div class="search-box">
      <Row style="margin-bottom: 15px;">
        <Col span="4">
          <div style="margin-bottom: 5px;">姓名</div>
          <Input v-model="searchInfo.name" placeholder="请输入姓名" style="width:calc(100% - 15px)" />
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">证件号码</div>
          <Input v-model="searchInfo.card_no" placeholder="请输入证件号码" style="width:calc(100% - 15px)" />
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">学历</div>
          <Select placeholder="请选择学历" clearable v-model="searchInfo.CPEI004" filterable transfer="" style="width: calc(100% - 15px);">
            <Option :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
          </Select>
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">年龄</div>
          <Input style="width: calc((100% - 35px) / 2);" v-model="searchInfo.start_age" />
          <span style="display: inline-block;width: 20px;text-align: center;">~</span>
          <Input style="width: calc((100% - 35px) / 2);" v-model="searchInfo.end_age" />
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">年份</div>
          <DatePicker type="year" placeholder="请选择年份" v-model="searchInfo.year" style="width: calc(100% - 15px)"></DatePicker>
        </Col>
      </Row>
      <Row style="margin-bottom: 30px;">
        <Col span="4" v-if="this.$store.state.user.severUserInfo.company_grade < '3'">
          <div style="margin-bottom: 5px;">所在区县</div>
          <Select placeholder="请选择所在区县" clearable v-model="searchInfo.area_code" filterable transfer="" style="width: calc(100% - 15px);" @on-change="getMailList2(4,searchInfo.area_code)">
            <Option :value="item.code" v-for="item in mailList1" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
        </Col>
        <Col span="4" v-if="this.$store.state.user.severUserInfo.company_grade <'4'">
          <div style="margin-bottom: 5px;">所在街道</div>
          <Select placeholder="请选择所在街道" clearable v-model="searchInfo.parent_code" filterable transfer="" style="width: calc(100% - 15px);" @on-change="getMailList2(5, searchInfo.parent_code)">
            <Option :value="item.code" v-for="item in mailList2" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
        </Col>
        <Col span="4" v-if="this.$store.state.user.severUserInfo.company_grade < '5'">
          <div style="margin-bottom: 5px;">所在社区</div>
          <Select placeholder="请选择所在社区" clearable v-model="searchInfo.company_code" filterable transfer="" style="width: calc(100% - 15px);" >
            <Option :value="item.code" v-for="item in mailList3" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">任职情况</div>
          <Select placeholder="请选择任职情况" clearable v-model="searchInfo.situation" style="width: calc(100% - 15px);">
            <Option value="1">村（居）委成员</Option>
            <Option value="2">党委成员</Option>
            <Option value="4">监委成员</Option>
            <Option value="3">交叉任职</Option>
          </Select>
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">社区/农村</div>
          <Select placeholder="请选择社区/农村" clearable v-model="searchInfo.level" style="width: calc(100% - 15px);">
            <Option value="45">村</Option>
            <Option value="40">社区</Option>
          </Select>
        </Col>
      </Row>
      <Row>
        <Col>
          <Button class="new-btn-sty" @click="findtime()">搜索</Button>
          <Button v-if="this.$store.state.user.severUserInfo.company_grade === '5' || this.$store.state.user.severUserInfo.company_grade === '4'" class="new-btn-sty1" @click="add()">
            <img style="width: 14px;height: 14px;margin-right: 8px;margin-bottom: 3px;" src="@/assets/images/V2-new-view/icon-add2.png" alt="" srcset="">
            <span>添加成员</span>
          </Button>
        </Col>
      </Row>
    </div>

    <Table v-if="!isNoData" stripe border :columns="columns" :data="data" style="border-radius: 5px;">
      <template slot-scope="{ row }" slot="position">
        <span v-if="row.position === '1'">村（居）民委员会主任</span>
        <span v-if="row.position === '2'">村（居）民委员会副主任</span>
        <span v-if="row.position === '3'">村（居）民委员会委员</span>
        <span v-if="row.position === '4'">村（居）民委员会委员（妇女委员）</span>
      </template>

      <template slot-scope="{ row }" slot="branch">
        <span v-if="row.branch_position === '1'">党组织书记</span>
        <span v-if="row.branch_position === '2'">党组织副书记</span>
        <span v-if="row.branch_position === '3'">党组织委员</span>
        <span v-if="row.branch_position === '4'">党组织委员（宣传委员）</span>
        <span v-if="row.branch_position === '5'">党组织委员（组织委员）</span>
      </template>

      <template slot-scope="{ row }" slot="control">
        <span v-if="row.control_position === '1'">村（居）务监督委员会主任</span>
        <span v-if="row.control_position === '2'">村（居）务监督委员会委员</span>
      </template>

      <template slot-scope="{ row }" slot="sex">
        <span v-if="row.sex == '1'">男</span>
        <span v-if="row.sex == '2'">女</span>
      </template>

      <template slot-scope="{ row }" slot="type">
        <span v-if="row.village == '1' && row.branch == '1'">是</span>
        <span v-if="row.village == '0' || row.branch == '0'">否</span>
      </template>

      <template slot-scope="{row}" slot="CPEI004">
        <span :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE" v-if="row.CPEI004 == item.TYPECODE">{{item.TYPENAME}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button style="background-color: unset;color: #1A5FFF;border-width: 0px;padding-right: 8px;" size="small" type="info" @click="viewProcess(row, true)">
          <img style="width: 14px;height: 10px;margin-right: 10px;margin-bottom: 2px;" src="../../../../assets/images/V2-new-view/icon-view.png" alt="" srcset="">
          <span>查看</span>
        </Button>
        <Button style="background-color: unset;color: #FFAB04;border-width: 0px;padding-right: 8px;" size="small" type="info" @click="viewProcess(row, false)">
          <img style="width: 14px;height: 14px;margin-right: 10px;margin-bottom: 2px;" src="../../../../assets/images/V2-new-view/icon-edit.png" alt="" srcset="">
          <span>编辑</span>
        </Button>
        <Button style="background-color: unset;color: #B40001;border-width: 0px;padding-right: 8px;" size="small" type="info" @click="remove(row)">
          <img style="width: 14px;height: 14px;margin-right: 10px;margin-bottom: 2px;" src="../../../../assets/images/V2-new-view/icon-delete.png" alt="" srcset="">
          <span>删除</span>
        </Button>
      </template>
    </Table>
    <div v-if="isNoData" style="text-align: center;">
      <img style="width: 160px;height: 190px;margin: 20px;" src="@/assets/images/V2-new-view/icon-no-data.png" />
    </div>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>

    <Row type="flex" justify="center" class="page_style">
      <Page v-if="!isNoData" class-name="page-s-class" :total="totalnum" :current="currentPageNo"
            :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size">
        <template>
          <span style="color: #C9C9C9;">共 <span style="color: #FFAB04">{{ totalnum }}</span> 条</span>
        </template>
      </Page>
    </Row>

    <Modal class="lwcy-form" width="640" v-model="modalEdit" title="两委成员信息" @on-ok="OK111">
      <p slot="header" style="color:#B40001;text-align:left;font-size: 14px;font-weight: bold;">
        <span>两委成员信息</span>
      </p>
      <Form :model="paramData" >
        <div class="item1" style="margin-bottom: 15px;">
          <div class="form-box">
            <span class="form-title">姓名<!-- <span style="color: red">(必填)</span> --></span>
            <Input :disabled="isDisable" style="width: calc(100% - 34px);" class="form-input" v-model="paramData.name" placeholder="请输入姓名"/>
          </div>
          <div class="form-box">
            <span class="form-title">证件号码</span>
            <Input :disabled="isDisable" style="width: calc(100% - 58px);" class="form-input" v-model="paramData.card_no" placeholder="请输入身份证号码"/>
          </div>
          <div class="form-box">
            <span class="form-title">姓别</span>
            <Select :disabled="isDisable" style="width: calc(100% - 34px);" class="form-input" v-model="paramData.sex" placeholder="请选择性别">
              <Option value="1">男</Option>
              <Option value="2">女</Option>
            </Select>
          </div>
          <div class="form-box">
            <span class="form-title">学历</span>
            <Select :disabled="isDisable" style="width: calc(100% - 34px);" class="form-input" v-model="paramData.CPEI004" filterable transfer="" placeholder="请选择学历">
              <Option :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
            </Select>
          </div>
          <div class="form-box" v-if="this.$store.state.user.severUserInfo.company_grade === '4'">
            <span class="form-title">社区/村</span>
            <Select :disabled="isDisable" style="width: calc(100% - 58px);" class="form-input" v-model="paramData.company_code" filterable transfer="" placeholder="请选择社区/村">
              <Option :value="item.code" v-for="item in mailList3" v-bind:key="item.code">{{item.name}}</Option>
            </Select>
          </div>
          <div class="form-box">
            <span class="form-title">是否村(居)委成员</span>
            <Select :disabled="isDisable" @on-change="updateVillage" style="width: calc(100% - 102px);" class="form-input" v-model="paramData.village" placeholder="请选择是否是村(居)委成员">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </div>
          <div class="form-box" v-if="village">
            <span class="form-title">村(居)委职位</span>
            <Select :disabled="isDisable" style="width: calc(100% - 82px);" class="form-input" v-model="paramData.position" placeholder="请选择村(居)委职位">
              <Option value="1">村（居）民委员会主任</Option>
              <Option value="2">村（居）民委员会副主任</Option>
              <Option value="3">村（居）民委员会委员</Option>
              <Option value="4">村（居）民委员会委员（妇女委员）</Option>
            </Select>
          </div>
          <div class="form-box">
            <span class="form-title">是否党委成员</span>
            <Select :disabled="isDisable" @on-change="updateBranch" style="width: calc(100% - 82px);" class="form-input" v-model="paramData.branch" filterable transfer="" placeholder="请选择是否是党委成员">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </div>
          <div class="form-box" v-if="branch">
            <span class="form-title">党委职位</span>
            <Select :disabled="isDisable" style="width: calc(100% - 58px);" class="form-input" v-model="paramData.branch_position" placeholder="请选择党委职位">
              <Option value="1">党组织书记</Option>
              <Option value="2">党组织副书记</Option>
              <Option value="3">党组织委员</Option>
              <Option value="4">党组织委员（宣传委员）</Option>
              <Option value="5">党组织委员（组织委员）</Option>
            </Select>
          </div>
          <div class="form-box">
            <span class="form-title">是否监委成员</span>
            <Select :disabled="isDisable" @on-change="updateControl" style="width: calc(100% - 82px);" class="form-input" v-model="paramData.control" filterable transfer="" placeholder="请选择是否是监委成员">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </div>
          <div class="form-box" v-if="control">
            <span class="form-title">监委职位</span>
            <Select style="width: calc(100% - 58px);" class="form-input" v-model="paramData.control_position" placeholder="请选择监委职位">
              <Option value="1">村（居）务监督委员会主任</Option>
              <Option value="2">村（居）务监督委员会委员</Option>
            </Select>
          </div>
          <div class="form-box">
            <span class="form-title">是否法人</span>
            <Select :disabled="isDisable" style="width: calc(100% - 58px);" class="form-input" v-model="paramData.legal_person" filterable transfer="" placeholder="请选择是否是法人">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </div>
          <div class="form-box">
            <span class="form-title">任职时间(始)</span>
            <DatePicker :disabled="isDisable" type="date" style="width: calc(100% - 82px);" class="form-input" placeholder="选择日期" v-model="paramData.start_time"></DatePicker>
          </div>
          <div class="form-box">
            <span class="form-title">任职时间(终)</span>
            <DatePicker :disabled="isDisable" type="date" style="width: calc(100% - 82px);" class="form-input" placeholder="选择日期" v-model="paramData.end_time"></DatePicker>
          </div>
        </div>
      </Form>
      <div slot="footer" style="text-align: left;">
        <i-button style="font-size: 12px;width: 64px;background-color: #B40001;height: 32px;line-height: 18px;" type="error" size="large" @click="OK111">确 认</i-button>
        <i-button style="font-size: 12px;width: 64px;background-color: #C9C9C9;height: 32px;line-height: 18px;border-color: #C9C9C9;color: #000000;margin-left: 15px;" type="error" size="large" @click="modalEdit = false">取 消</i-button>
      </div>
    </Modal>
    <Modal v-model="modalEdit2" title="再次确认" width="700" cancel-text="关闭"
           @on-ok="ok222(paramData)" @on-cancel="modalEdit2=false" ok-text="确定">
      <p slot="header" style="color:#B40001;text-align:left;font-size: 14px;font-weight: bold;">
        <span>再次确认</span>
      </p>
      <div style="color: red; font-size: 3rem; text-align: center;">确定删除此两委成员信息吗！</div>
      <div slot="footer" style="text-align: left;">
        <i-button style="font-size: 12px;width: 64px;background-color: #B40001;height: 32px;line-height: 18px;" type="error" size="large" @click="ok222(paramData)">确 认</i-button>
        <i-button style="font-size: 12px;width: 64px;background-color: #C9C9C9;height: 32px;line-height: 18px;border-color: #C9C9C9;color: #000000;margin-left: 15px;" type="error" size="large" @click="modalEdit2 = false">取 消</i-button>
      </div>
    </Modal>
    <!-- <Modal class="lwcy-form" v-model="modalEdit3" title="两委成员信息" @on-ok="modalEdit3 = false">
      <p slot="header" style="color:#B40001;text-align:left;font-size: 14px;font-weight: bold;">
        <span>两委成员信息</span>
      </p>
      <Form :model="paramData" >
        <Row class="item1">
          <Col span="5">姓名:</Col>
          <Col span="12" offset="1">
            <Input disabled v-model="paramData.name" placeholder="请输入姓名"/>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5">证件号码:</Col>
          <Col span="12" offset="1">
            <Input disabled v-model="paramData.card_no" placeholder="请输入身份证号码"/>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5">姓别:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.sex" placeholder="请选择性别">
              <Option value="1">男</Option>
              <Option value="2">女</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5">学历:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.CPEI004" filterable transfer="">
              <Option :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5">是否村(居)委成员:</Col>
          <Col span="12" offset="1">
            <RadioGroup disabled v-model="paramData.village" @on-change="updateVillage" type="button" button-style="solid">
              <Radio disabled label="1" border>是</Radio>
              <Radio disabled label="0" border >否</Radio>
            </RadioGroup>
          </Col>
        </Row>
        <Row class="item1" v-if="village">
          <Col span="5">村（居）委职位:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.position" placeholder="请选择职位">
              <Option value="1">村（居）民委员会主任</Option>
              <Option value="2">村（居）民委员会副主任</Option>
              <Option value="3">村（居）民委员会委员</Option>
              <Option value="4">村（居）民委员会委员（妇女委员）</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5">是否党委成员:</Col>
          <Col span="12" offset="1">
            <RadioGroup disabled v-model="paramData.branch" @on-change="updateBranch" type="button" button-style="solid">
              <Radio disabled label="1" border>是</Radio>
              <Radio disabled label="0" border>否</Radio>
            </RadioGroup>
          </Col>
        </Row>

        <Row class="item1" v-if="branch">
          <Col span="5">党委职位:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.branch_position" placeholder="请选择职位">
              <Option value="1">党组织书记</Option>
              <Option value="2">党组织副书记</Option>
              <Option value="3">党组织委员</Option>
              <Option value="4">党组织委员（宣传委员）</Option>
              <Option value="5">党组织委员（组织委员）</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5">是否监委成员:</Col>
          <Col span="12" offset="1">
            <RadioGroup disabled v-model="paramData.control" @on-change="updateControl" type="button" button-style="solid">
              <Radio disabled label="1" border>是</Radio>
              <Radio disabled label="0" border>否</Radio>
            </RadioGroup>
          </Col>
        </Row>
        <Row class="item1" v-if="control">
          <Col span="5">党委职位:</Col>
          <Col span="12" offset="1">
            <Select disabled v-model="paramData.control_position" placeholder="请选择职位">
              <Option value="1">村（居）务监督委员会主任</Option>
              <Option value="2">村（居）务监督委员会委员</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5">是否法人:</Col>
          <Col span="12" offset="1">
            <RadioGroup disabled v-model="paramData.legal_person" type="button" button-style="solid">
              <Radio disabled label="1" border>是</Radio>
              <Radio disabled label="0" border>否</Radio>
            </RadioGroup>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5">任职时间（始）:</Col>
          <Col span="12" offset="1">
            <DatePicker disabled type="date" placeholder="选择日期" v-model="paramData.start_time"></DatePicker>
          </Col>
        </Row>
        <Row  class="item1">
          <Col span="5">任职时间（终）:</Col>
          <Col span="12" offset="1">
            <DatePicker disabled type="date" placeholder="选择日期" v-model="paramData.end_time"></DatePicker>
          </Col>
        </Row>
      </Form>
      <div slot="footer" style="text-align: left;">
        <i-button style="font-size: 12px;width: 64px;background-color: #B40001;height: 32px;line-height: 18px;" type="error" size="large" @click="modalEdit3 = false">确 认</i-button>
        <i-button style="font-size: 12px;width: 64px;background-color: #C9C9C9;height: 32px;line-height: 18px;border-color: #C9C9C9;color: #000000;margin-left: 15px;" type="error" size="large" @click="modalEdit3 = false">取 消</i-button>
      </div>
    </Modal> -->
  </div>
</template>
<script>
import { getOffice, getTypeNameList, saveCommitteee, date2str, getCommitteeList, getRegionList, deleteCommittee } from '@/api/eventlist'
export default {
  data () {
    return {
      mailList1: [],
      mailList2: [],
      mailList3: [],
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      company_code: this.$store.state.user.severUserInfo.company_code,
      modalEdit: false,
      modalEdit2: false,
      modalEdit3: false,
      loadData: true,
      village: false,
      branch: false,
      control: false,
      isNoData: false,
      paramData: { village: '0', branch: '0', legal_person: '0', control: '0'},
      paramData2: { village: '0', branch: '0', legal_person: '0', control: '0'},
      searchInfo: {},
      param: {},
      dictList: [],
      reginList: [],
      data: [],
      columns: [
      { title: '序号', type: 'index', width: 80, align: 'center' },
      { title: '姓名', key: 'name', width: 100, align: 'center' },
      { title: '性别', slot: 'sex', width: 80, align: 'center' },
      { title: '身份证号', key: 'card_no', width: 180, align: 'center' },
      { title: '所属社区', key: 'company_name', width: 200, align: 'center' },
      { title: '村（居）委职务', slot: 'position', width: 200, align: 'center' },
      { title: '党委职务', slot: 'branch', width: 200, align: 'center' },
      { title: '监委职务', slot: 'control', width: 200, align: 'center' },
      { title: '交叉任职', slot: 'type', width: 100, align: 'center' },
      { title: '学历', slot: 'CPEI004', width: 100, align: 'center' },
      // { title: '公示开始时间', key: 'end_time', width: 250, align: 'center' },
      // {
      { title: '操作', slot: 'action', align: 'center', minWidth: 230 }
    ],
    }
  },
  methods: {
    init() {
      let param = {
        pageSize: this.currentPageSize,
        pageNo: this.currentPageNo,
        name: this.searchInfo.name,
        card_no: this.searchInfo.card_no,
        CPEI004: this.searchInfo.CPEI004,
        area_code: this.searchInfo.area_code,
        parent_code: this.searchInfo.parent_code,
        company_code: this.searchInfo.company_code,
        situation: this.searchInfo.situation,
        start_age: this.searchInfo.start_age,
        end_age: this.searchInfo.end_age,
        years: date2str(this.searchInfo.year),
        level: this.searchInfo.level
      }
      getCommitteeList(param).then(res => {
        if (res.data.errcode === 0) {
          this.data = res.data.data.results
          this.isNoData = res.data.data.totalRecord <= 0
          this.loadData = false
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '获取列表失败', desc: res.data.errmsg })
          this.loadData = false
        }
      })
    },
    add() {
      this.isDisable = false
      this.paramData = this.paramData2
      this.updateVillage()
      this.updateBranch()
      this.updateControl()
      this.modalEdit = true
    },
    findtime() {
      this.currentPageNo = 1
      this.currentPageSize =  10
      this.init()
    },
    viewProcess(item, isDisable) {
      this.isDisable = isDisable
      this.modalEdit = true
      let param = this.$common.xeUtils.clone(item,true)
      this.paramData = param
      this.updateVillage()
      this.updateBranch()
      this.updateControl()
    },
    remove(item) {
      this.param = item
      this.modalEdit2 = true
    },
    updateVillage() {
      console.log('99999')
      if (this.paramData.village === '1') {
        this.village = true
      } else {
        this.village = false
      }
    },
    updateBranch() {
      if (this.paramData.branch === '1') {
        this.branch = true
      } else {
        this.branch = false
      }
    },
    updateControl() {
      if (this.paramData.control === '1') {
        this.control = true
      } else {
        this.control = false
      }
    },
    downLoad(item) {
      this.modalEdit3 = true
      let param = this.$common.xeUtils.clone(item,true)
      this.paramData = param
      this.updateVillage()
      this.updateBranch()
      this.updateControl()
    },
    OK111() {
      this.paramData.start_time = date2str(this.paramData.start_time)
      this.paramData.end_time = date2str(this.paramData.end_time)
      if (this.paramData.village === '0') {
        this.paramData.position = null
      }
      if (this.paramData.branch === '0') {
        this.paramData.branch_position = null
      }
      if (this.paramData.control === '0') {
        this.paramData.control_position = null
      }
      saveCommitteee(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功', desc: '' })
          // this.paramData = this.paramData2
          this.init()
        } else {
          this.$Notice.error({ title: '保存失败', desc: res.data.errmsg })
          this.init()
        }
      })
    },
    ok222() {
      deleteCommittee(this.param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '删除成功', desc: '' })
          this.init()
        } else {
          this.$Notice.error({ title: '删除失败！请重试', desc: res.data.errmsg })
          this.init()
        }
      })
    },
    getTypeName (id, index) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.dictList[index] = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getDictList () {
      this.getTypeName('degree', 7)
    },
    getRegionList (id, index) {
      getRegionList({ id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.reginList[index] = res.data.data
          this.$forceUpdate()
        } else {
          this.$Notice.error({
            title: '获取区域列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    },
    getMailList (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ grade: grade, code: code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList1 = res.data.data
          let xiehui = {code: "1", name: "社区工作者协会", master: "社区工作者协会"}
          this.mailList1.push(xiehui)
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    getMailList2 (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ code: code }).then(res => {
        if (res.data.errcode === 0) {
          if (grade === 4) {
            this.mailList2 = res.data.data
            let xiehui = {code: "1", name: "社区工作者协会", master: "社区工作者协会"}
            this.mailList2.push(xiehui)
          } else if (grade === 5) {
            this.mailList3 = res.data.data
          }
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    }
  },
  mounted() {
    this.getDictList()
    this.init()
    this.getRegionList('', 0)
    if (this.companyGrade < 3) {
      this.getMailList(2, null)
    } else if (this.companyGrade < 4) {
      this.getMailList2(4, this.companyCode)
    } else if (this.companyGrade < 5) {
      this.getMailList2(5, this.companyCode)
    }
    if (this.$store.state.user.severUserInfo.company_grade === '3') {
      this.getRegionList(this.$store.state.user.severUserInfo.company_code, 1)
    }
    if (this.$store.state.user.severUserInfo.company_grade === '4') {
      this.getRegionList(this.$store.state.user.severUserInfo.company_code, 2)
    }
    if (this.$store.state.user.severUserInfo.company_grade === '5') {
      this.getRegionList(this.$store.state.user.severUserInfo.company_code, 3)
    }
  },
  computed: {
    companyGrade () {
      return this.$store.state.user.severUserInfo.company_grade
    },
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  }
}
</script>
<style scoped>
  .item1{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .search-info-style {
    margin: 0px;
  }
  .form-box{
    width: 280px;
    height: 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #F8F8F8;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 7px 15px;
    margin-bottom: 15px;
  }
  .form-title{
    font-size: 12px;
    color: #C9C9C9;
  }
  .form-input /deep/ .ivu-input{
    font-size: 12px;
    background-color: transparent;
    border: 0;
    text-align: right;
    padding: 0;
    height: 22px;
    line-height: 22px;
    color: #515151;
  }
  .form-input /deep/ .ivu-select-selection,
  .form-input /deep/ .ivu-select-selected-value,
  .form-input /deep/ .ivu-select-placeholder,
  .form-input /deep/ .ivu-select-input{
    font-size: 12px;
    background-color: transparent;
    border: 0;
    text-align: right;
    padding: 0;
    height: 22px;
    line-height: 22px;
    color: #515151;
  }
  .form-input /deep/ .ivu-icon-ios-arrow-down:before,
  .form-input /deep/ .ivu-icon-ios-calendar-outline:before,
  .form-input /deep/ .ivu-input-suffix{
    display: none !important;
  }

  .new-btn-sty {
    margin-right: 10px;
    color: #fff;
    background-color: #B40001;
    border-color: #B40001;
    font-weight: 500;
    font-size: 12px;
    min-width: 64px;
  }
  .new-btn-sty1{
    margin-right: 5px;
    color: #FFAB04;
    background-color: #FFFAE8;
    border-color: #FFAB04;
    font-weight: 500;
    font-size: 12px;
    min-width: 64px;
  }
  .page-box{
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
  }
  .search-box{
    background-color: #F8F8F8;
    border-radius: 5px;
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .page_style {
    margin-top: 30px;
  }
  .page-s-class /deep/ .ivu-page-item-active{
    border-color: #FFAB04;
    background-color: #FFFAE8;
  }
  .page-s-class /deep/ .ivu-page-item-active a{
    color: #FFAB04;
  }
  .icon-search{
    position: absolute;
    top: 8px;
    right: 25px;
    width: 16px;
    height: 16px;
    z-index: 1;
  }
  /deep/ .ivu-table-fixed-header thead tr th, /deep/ .ivu-table-header thead tr th{
    font-size: 14px;
    font-weight: bold;
    color: #161616;
    background-color: #EFEFEF;
    border-color: #C9C9C9;
    height: 40px;
  }
  /deep/ .ivu-table td{
    height: 40px;
    color: #161616;
    border-color: #C9C9C9;
  }
  /deep/ .ivu-input{
    padding-right: 30px;
  }
  /deep/ .ivu-page-item{
    background-color: #F8F8F8;
    border-radius: 5px;
    border-color: #F8F8F8;
  }
  /deep/ .ivu-page-prev, /deep/ .ivu-page-next{
    background-color: #F8F8F8;
    border-radius: 5px;
    border-color: #F8F8F8;
  }
  .search-box /deep/ .ivu-icon-ios-arrow-down:before{
    background-color: #C9C9C9;
    color: #131313;
    font-size: 16px;
    border-radius: 2px;
  }
  .search-box /deep/ .ivu-icon-ios-calendar-outline:before{
    background-color: #C9C9C9;
    color: #131313;
    font-size: 16px;
    border-radius: 2px;
  }

  .color16{
    color: #161616;
  }
  /deep/ .ivu-modal-header, /deep/ .ivu-modal-footer{
    border-bottom: 0;
    border-top: 0;
  }
  /deep/ .ivu-modal-header{
    padding: 30px 30px 20px;
    height: 70px;
  }
  /deep/ .ivu-modal-footer{
    padding: 0px 30px 30px;
  }
  /deep/ .ivu-modal-body{
    padding: 0px 30px 56px;
  }
  /deep/ .ivu-modal-close {
    font-size: 20px;
    right: 30px;
    top: 30px;
  }
  /deep/ .ivu-modal-close .ivu-icon-ios-close {
    font-size: 20px;
    color:black;
    background-color: #f6f4f4;
    border-radius:50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    top: -3px;
  }
  /deep/ .ivu-modal-content{
    border-radius: 10px;
  }
  .splc-item{
    width: 100%;
    height: 65px;
    background-color: #F8F8F8;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 14px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
  }
  .splc-item img{
    width: 37px;
    height: 37px;
    vertical-align: middle;
    margin-right: 10px;
  }
  .splc-spnr{
    width: calc(100% - 47px);
  }
  .sp-time{
    width: 100%;
    font-size: 14px;
    color: #161616;
  }
  .sp-jigou{
    width: 100%;
    font-size: 12px;
    color: #C9C9C9;
  }
  .splc-modal .splc-item:last-child{
    margin-bottom: 0;
  }
  .lwcy-form /deep/ .ivu-modal-body{
    padding-bottom: 26px;
  }
  /deep/ .ivu-input[disabled], /deep/ fieldset[disabled] .ivu-input{
    color: #515151;
  }
  /deep/ .ivu-select-input[disabled]{
    -webkit-text-fill-color: #515151;
  }
  /deep/ .ivu-select-single .ivu-select-selection .ivu-select-placeholder{
    color: #c5c8ce;
  }
</style>
